<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">

		<title>导出利润报表</title>
		<!-- Bootstrap core CSS -->
		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
		<!--top icon-->
		<link rel="shortcut icon" th:href="@{/ChongYouIcon.ico}" type="image/x-icon"/>
		<!-- Custom styles for this template -->
		<link th:href="@{/css/dashboard.css}" rel="stylesheet">
		<!-- 使用 Font Awesome 图标库 -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
		<style type="text/css">
			/* Chart.js */
			
			@-webkit-keyframes chartjs-render-animation {
				from {
					opacity: 0.99
				}
				to {
					opacity: 1
				}
			}
			
			@keyframes chartjs-render-animation {
				from {
					opacity: 0.99
				}
				to {
					opacity: 1
				}
			}

			.custom-upload-button {
				position: relative;
				display: inline-block;
				padding: 8px 20px;
				border: 2px solid #ccc;
				background-color: #f9f9f9;
				color: #333;
				cursor: pointer;
				border-radius: 4px;
				font-family: Arial, sans-serif;
				font-size: 14px;
				overflow: hidden;
			}

			.custom-upload-button input[type="file"] {
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				cursor: pointer;
			}

			.custom-upload-button .fa-upload {
				margin-right: 5px;
			}
			.file-name {
				margin-top: 10px;
				font-size: 14px;
			}
			.chinese-decorative-box {
				width: 300px;
				border: 2px solid #ff9e80;
				border-radius: 10px;
				padding: 20px;
				background-color: #ffebee;
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
				display: inline-block;
				max-width: 100%;
				word-wrap: break-word;
				font-family: 'Microsoft Yahei', sans-serif; /* 使用合适的中文字体 */
				line-height: 1.5;
				text-align: center;
			}

			.chinese-decorative-box::before,
			.chinese-decorative-box::after {
				content: "";
				display: block;
				width: 20px;
				height: 20px;
				position: absolute;
				background-color: #ff9e80;
				transform: rotate(45deg);
			}

			.chinese-decorative-box::before {
				top: -10px;
				left: -10px;
			}

			.chinese-decorative-box::after {
				bottom: -10px;
				right: -10px;
			}
			.chinese-decorative-box label {
				display: block;
				text-align: left;
				margin-bottom: 10px;
			}

			 .upload-button {
				 display: inline-block;
				 padding: 10px 20px;
				 background-color: #ff9e80;
				 color: #ffffff;
				 border: none;
				 border-radius: 4px;
				 font-size: 16px;
				 cursor: pointer;
				 transition: background-color 0.3s ease;
			 }

			.upload-button:hover {
				background-color: #C94F4F;
			}

			.custom-dialog {
				display: flex;
				align-items: center;
				justify-content: center;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5); /* 半透明背景，可根据需要调整 */
				z-index: 9999;
			}

			.dialog-content {
				background-color: white;
				padding: 20px;
				max-width: 80%; /* 最大宽度，可根据需要调整 */
				max-height: 80%; /* 最大高度，可根据需要调整 */
				overflow-y: auto;
				text-align: center;
				position: relative; /* 添加相对定位 */
				transform: translate(-50%, -50%); /* 居中显示 */
				top: 50%;
				left: 50%;
			}

			.dialog-content h2 {
				font-family: 'Microsoft Yahei', sans-serif;
				font-size: 24px;
				margin-bottom: 10px;
				text-align: left;
			}

			.dialog-content p {
				font-family: 'Microsoft Yahei', sans-serif;
				text-align-all: center;
				font-size: 20px;
				margin-bottom: 20px;
			}

			.dialog-content button {
				padding: 5px 10px;
				background-color: #AAAAAA;
				color: #fff;
				border: none;
				cursor: pointer;
			}
			.dialog-content button:hover{
				background-color: #C94F4F;
			}
		</style>
	</head>

	<body>
<!--顶部导航栏-->
<div th:insert="~{common/common::topbar}"></div>

<div class="container-fluid">
	<div class="row">
<!--侧边栏-->
				<div th:insert="~{common/common::sidebar (active='export')}"></div>

		<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
			<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
				<div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
					<div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
				</div>
				<div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
					<div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
				</div>
			</div>
			<h2 class="charming-title">导出利润报表</h2>
			<hr>
			<div><!--th:action="@{/excelFile/upload}"-->

					<div >
						<div class="custom-upload-button" >
							<i class="fas fa-upload"></i>选择Excel文件
							<input name="file" id="file-input" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
						</div>
					</div>
					<div id="file-name-container" class="file-name"></div>

<hr>
					<!-- 在这里放置您的内容 -->
					<div id="is-participate-checkbox" style="display: none">
						<div class="chinese-decorative-box">
							<label>是否参与返佣活动？</label>
							<label><input type="radio"  name="is_participate" value="true">是</label>
							<label><input type="radio"  name="is_participate" value="false">否</label>
						</div>
				</div>
				<hr>
				<div id="insuranceSetting" style="display: none">
						<div class="chinese-decorative-box">
							<label>运费险设置</label>
							<label></label><input type="text" class="form-control" id="insuranceInput" placeholder="默认：￥3" name="insuranceFee">
						</div>
				</div>

					<div style="margin-top: 10px">
					<button  onclick="upload()" id="submit" class="upload-button" disabled>上传</button>
				</div>

				<div id="loading-spinner" style="display: none;">
					<!-- 这里放置加载动画的 HTML 结构 -->
					<!-- 例如，可以使用 Font Awesome 的旋转图标 -->
					<i class="fas fa-spinner fa-spin"></i>
					<span>Loading...</span>
				</div>
				<div style="margin-top: 10px">
					<button  id="downloadButton" class="upload-button"  style="display: none">下载</button>
				</div>
				<div class="custom-dialog" id="customDialog" style="display: none">
					<div class="dialog-content">
						<h2>异常</h2>
						<hr>
						<p id="dialogMessage"></p>
						<button onclick="hideCustomDialog()" style="font-family: 'Microsoft Yahei', sans-serif">关闭</button>
					</div>
				</div>
			</div>
			<script>
				//获取单选框元素
				const radioInputs = document.getElementsByName('is_participate');
				//获取运费险设置框
				const insuranceInput = document.getElementById('insuranceSetting');
				const insurance = document.getElementById('insuranceInput');
				// 获取下载按钮元素
				const downloadButton = document.getElementById('downloadButton');
				//获取选择文件元素
				const fileInput = document.getElementById('file-input');
				//获取选择文件容器元素
				const fileNameContainer = document.getElementById('file-name-container');
				//获取是否返佣选择框元素
				const isParticipateCheckbox = document.getElementById('is-participate-checkbox');
				//获取上传按钮元素
				const uploadButton = document.getElementById('submit');
				// 添加点击事件监听器
				downloadButton.addEventListener('click', () => {
					// 发送下载请求
					fetch('http://110.42.229.149:8081/laf/excelFile/download', {
						method: 'post',
						responseType: 'blob' // 设置响应类型为二进制数据
					})
							.then(response => {
								// 处理响应
								if (response.ok) {
									// 如果响应成功，将其转换为二进制数据
									return response.blob();
								} else {
									throw new Error('下载请求失败');
								}
							})
							.then(blob => {
								// 创建一个临时的下载链接
								const url = window.URL.createObjectURL(blob);
								// 创建一个下载链接的虚拟元素
								const a = document.createElement('a');
								a.href = url;
								a.download = 'Profit'; // 可以根据需要设置下载的文件名
								// 模拟点击下载链接
								a.click();
								// 销毁临时的下载链接
								window.URL.revokeObjectURL(url);
								document.getElementById('downloadButton').style.display = 'none';
								for (let i = 0; i < radioInputs.length; i++) {
									radioInputs[i].checked = false;
								}

								isParticipateCheckbox.style.display="none";
								insuranceInput.style.display="none";
								uploadButton.disabled=true;
								// 清除“已选择：文件”文本
								fileNameContainer.textContent = '';
							})
							.catch(error => {
								console.error(error);
							});
				});
				//展示加载圆圈
				function showLoadingSpinner() {
					var loadingSpinner = document.getElementById('loading-spinner');
					loadingSpinner.style.display = 'block';
				}
				//隐藏健在圆圈
				function hideLoadingSpinner() {
					var loadingSpinner = document.getElementById('loading-spinner');
					loadingSpinner.style.display = 'none';
				}
				//上传文件
				function upload(){
					showLoadingSpinner();
					var file = document.getElementById('file-input').files[0];

					let selectedValue;

					for (let i = 0; i < radioInputs.length; i++) {
						if (radioInputs[i].checked) {
							selectedValue = radioInputs[i].value;
							break;
						}
					}
					let insuranceFee;
					insuranceFee=insurance.value;
					if (!file) {
						hideLoadingSpinner();
						return;
					}

					var formData = new FormData();
					formData.append('file', file);
					formData.append('is_participate', selectedValue);
					formData.append('InsuranceFee',insuranceFee)

					fetch('excelFile/upload', {
						method: 'post',
						body: formData
					})
							.then(response => {
								console.log(response);
								if (response.ok) {
									hideLoadingSpinner();
									return response.json();
								} else {
									throw new Error('文件上传失败');
								}
							}).then(data =>{
						if (data.code === 0) {
							document.getElementById('downloadButton').style.display = 'block';
						}else {
							showCustomDialog(data.msg);
						}
					})
							.catch(error => {
								console.error(error);
							});
				}
				//选择文件事件监听
				fileInput.addEventListener('change', function() {
					const file = fileInput.files[0];
					if (file) {
						fileNameContainer.textContent = '已选择：' + file.name;
						isParticipateCheckbox.style.display = 'block';
						insuranceInput.style.display = 'block';
					} else {
						fileNameContainer.textContent = '';
						isParticipateCheckbox.style.display = 'none';
						insuranceInput.style.display = 'none';
						uploadButton.disabled = true; // 或者隐藏上传按钮：uploadButton.style.display = 'none';
					}
				});
				isParticipateCheckbox.addEventListener('click', function(event) {
					// 检查点击事件是否发生在单选框上
					if (event.target.tagName.toLowerCase() === 'input' && event.target.type === 'radio') {
						uploadButton.disabled=false;
				}});
				function showCustomDialog(message) {
					var dialog = document.getElementById('customDialog');
					var dialogMessage = document.getElementById('dialogMessage');

					dialogMessage.innerText = message;
					dialog.style.display = 'block';
				}

				function hideCustomDialog() {
					var dialog = document.getElementById('customDialog');
					dialog.style.display = 'none';
				}
				function adjustDialogSize() {
					var dialogContent = document.querySelector('.dialog-content');
					var windowHeight = window.innerHeight;
					var dialogHeight = dialogContent.offsetHeight;

					// 计算弹窗的顶部偏移量
					var topOffset = Math.max(0, (windowHeight - dialogHeight) / 2);

					// 设置弹窗的顶部偏移量
					dialogContent.style.top = topOffset + 'px';
				}

				window.addEventListener('DOMContentLoaded', adjustDialogSize);
				window.addEventListener('resize', adjustDialogSize);
			</script>
		</main>
	</div>
</div>
	</body>

</html>